<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王佳佳">
    <title>下拉菜单</title>
    <style>
        nav
        {
            width: 100%;
            height: 60px;
            background-color: #ECEEEB;
        }
        .container
        {
            width: 800px;
            height: 60px;
            background-color: #A7AAA7;
            margin: 0 auto;
            font-size: 20px;
        }
        .container a
        {
            text-decoration: none;
            color: black;
        }
        .container>ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
            height: 60px;
            line-height: 60px;
            display: flex;
            justify-content: space-around;
        }
        .container>ul>li
        {
            /* border: 1px solid; */
            position: relative;
        }
        .nav-sub
        {
            /* border: 1px solid; */
            width: 100px;
            height: 180px;
            margin-left: -10px;
            text-align: center;
            position: absolute;
            padding: 0;
            list-style: none;
            border: 1px solid lightgray;
            border-top: none;
            display: none; 
        }
    </style>
</head>
<body>
    <script src="./jquery.js"></script>
    <nav>
        <div class="container">
            <ul>
                <li class="box">
                    <a href="#">公司简介</a>
                    <ul class="nav-sub">
                        <li><a href="#">概况介绍</a></li>
                        <li><a href="#">发展历史</a></li>
                        <li><a href="#">公司实力</a></li>
                    </ul>
                </li>
                <li class="box">
                    <a href="#">产品介绍</a>
                    <ul class="nav-sub">
                        <li><a href="#">软件研发</a></li>
                        <li><a href="#">软件教育</a></li>
                        <li><a href="#">天使投资</a></li>
                    </ul>
                </li>
                <li class="box">
                    <a href="#">联系我们</a>
                    <ul class="nav-sub">
                        <li><a href="#">公司地址</a></li>
                        <li><a href="#">联系方式</a></li>
                        <li><a href="#">投资加盟</a></li>
                    </ul>
                </li>
                <li class="box">
                    <a href="#">人才招聘</a>
                    <ul class="nav-sub">
                        <li><a href="#">java招聘</a></li>
                        <li><a href="#">HTML招聘</a></li>
                        <li><a href="#">PHP招聘</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

</body>
</html>

<script>
    window.onload = function()
    {
        var box= $('.box');
        $(box).each(function(index)
        {
            $(this).mouseover(function()
            {
                //show显示
                // $('.nav-sub').eq(index).show();
                $('.nav-sub').eq(index).css('display','block');
            })

            $(this).mouseout(function()
            {
                //hide隐藏
                // $('.nav-sub').eq(index).hide();
                $('.nav-sub').eq(index).css('display','none');
            })
        })

        var firsta = $('.box').children('a');
        $(firsta).each(function(index)
        {
            $(this).mouseover(function()
            {
                $(this).css('color','orange').css('text-decoration','underline');
            })
            $(this).mouseout(function()
            {
                $(this).css('color','black').css('text-decoration','none');
            })
        })

        var lasta = $('.nav-sub').children('li').children('a');
        $(lasta).each(function(index)
        {
            $(this).mouseover(function()
            {
                $(this).css('text-decoration','underline');
            })
            $(this).mouseout(function()
            {
                $(this).css('text-decoration','none');
            })
        })
    }
</script>